<script setup lang="ts">
defineOptions({
  name: "invitationInfo"
});

import { ref, onMounted } from "vue";
import { getInvitation, InvitationResponse } from "@/api/invitation";
import { ElMessage, ElIcon } from "element-plus";
import { Picture } from "@element-plus/icons-vue";
import {
  validateUploadFile,
  FileType,
  updateUploadConfig
} from "@/utils/uploadFile";

// 邀请函数据
const invitationData = ref<any>(null);
const loading = ref(false);

// 背景图片相关
const backgroundImage = ref<string>("");
const fileInput = ref<HTMLInputElement | null>(null);

// 基础地址（使用OSS域名）
const BASE_URL = "https://exhibition-bucket.oss-cn-beijing.aliyuncs.com";

// 获取邀请函数据
const getInvitationData = async () => {
  try {
    loading.value = true;
    const response: any = await getInvitation(1);
    console.log("邀请函数据:", response);

    if (response.code === 1 && response.data) {
      invitationData.value = response.data;
      // 数据设置完成
    }
  } catch (error) {
    console.error("获取邀请函数据失败:", error);
  } finally {
    loading.value = false;
  }
};

// 图片加载成功
const handleImageLoad = () => {
  // 图片加载成功
};

// 获取图片完整URL
const getImageUrl = (imagePath: string) => {
  if (!imagePath) return "";

  // 如果已经是完整URL，直接返回
  if (imagePath.startsWith("http://") || imagePath.startsWith("https://")) {
    return imagePath;
  }

  // 使用OSS域名拼接
  return `${BASE_URL}${imagePath}`;
};

// 图片加载失败
const handleImageError = (event: Event) => {
  const target = event.target as HTMLImageElement;
  console.error("图片加载失败:", target.src);
  ElMessage.warning("图片加载失败，请检查图片文件是否存在");
};

// 触发文件上传
const triggerFileUpload = () => {
  fileInput.value?.click();
};

// 处理文件选择
const handleFileChange = (event: Event) => {
  const target = event.target as HTMLInputElement;
  const file = target.files ? target.files[0] : null;

  if (!file) return;

  // 使用uploadFile工具进行文件验证
  const validationResult = validateUploadFile(file);
  if (!validationResult.isValid) {
    ElMessage.error(validationResult.error || "文件验证失败");
    return;
  }

  // 生成背景图片URL
  const imageUrl = URL.createObjectURL(file);
  backgroundImage.value = imageUrl;

  ElMessage.success("背景图片上传成功");

  // 清空input，允许重复选择同一文件
  target.value = "";
};

onMounted(() => {
  getInvitationData();
  // 设置图片上传配置
  updateUploadConfig(FileType.IMAGE, {
    maxSize: 1 * 1024 * 1024, // 1MB
    maxSizeMB: 1
  });
});
</script>

<template>
  <div class="invitationInfo">
    <div
      class="invitation-card"
      :style="
        backgroundImage ? { backgroundImage: `url(${backgroundImage})` } : {}
      "
      @click="triggerFileUpload"
    >
      <div class="title-big">A1111</div>
      <div class="title-small">中国国际核工业展览会</div>
      <div class="visit">
        <span>诚</span>
        <span>|</span>
        <span>邀</span>
        <span>|</span>
        <span>参</span>
        <span>|</span>
        <span>观</span>
      </div>
      <div class="small-text">invitation</div>
      <div class="title-down">2022中国国际核工业展—展商服务系统</div>
      <div class="qr-code">
        <img
          v-if="invitationData?.img"
          :src="getImageUrl(invitationData.img)"
          alt="邀请函图片"
          class="qr-image"
          @error="handleImageError"
          @load="handleImageLoad"
        />
        <div v-else-if="loading" class="qr-placeholder">加载中...</div>
        <div v-else class="qr-placeholder">
          <el-icon style="font-size: 24px; color: #909399"><Picture /></el-icon>
          <p>暂无图片</p>
        </div>
      </div>
      <div class="card-bottom">
        <span>【核工展】%name% 您好，2022中国国际</span>
        <span>核工业展，欢迎您的加入！注册链接：</span>
        <span>https://hoe.ink/IJV3</span>
      </div>
    </div>

    <!-- 隐藏的文件输入框 -->
    <input
      ref="fileInput"
      type="file"
      accept="image/jpeg,image/jpg,image/png"
      style="display: none"
      @change="handleFileChange"
    />

    <div class="data">
      <div class="data-item">
        <span>0</span>
        <span class="text">已注册</span>
      </div>
      <div class="data-item">
        <span>0</span>
        <span class="text">已查看</span>
      </div>
    </div>

    <div class="explain">
      <span
        >说明：请您用手机扫描二维码，预览并分享邀请函至朋友。提升您的参展形象，扩大知名度，邀请您的潜在客户到访展台</span
      >
      <span>洽谈合作</span>
    </div>

    <div class="remark">
      <span>底图上传格式:JPG，PNG，IPEG</span>
      <span
        >底图上传后，将会生成您企业的个性邀请函。请您确保底图的比例为16:9(高:宽)，图片不大于1Mb。</span
      >
    </div>
  </div>
</template>

<style lang="scss" scoped>
.invitationInfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #fff;

  .invitation-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 260px;
    height: 470px;
    margin-top: 20px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: 1px solid #9b9b9b;
    border-radius: 3px;
    transition: all 0.3s ease;

    &:hover {
      border-color: #409eff;
      box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
    }

    &::before {
      position: absolute;
      top: 10px;
      right: 10px;
      padding: 4px 8px;
      font-size: 10px;
      color: #fff;
      pointer-events: none;
      content: "点击上传背景图片";
      background-color: rgb(0 0 0 / 60%);
      border-radius: 4px;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    &:hover::before {
      opacity: 1;
    }

    .title-big {
      margin-top: 70px;
      font-size: 30px;
      font-weight: bold;
      color: #4f443a;
      text-shadow: 1px 1px 2px rgb(255 255 255 / 80%);
    }

    .title-small {
      font-size: 20px;
      color: #293f4c;
      text-shadow: 1px 1px 2px rgb(255 255 255 / 80%);
    }

    .visit {
      display: flex;
      justify-content: space-evenly;
      width: 90px;
      margin-top: 5px;
      font-size: 14px;
      color: #bf8398;
      text-shadow: 1px 1px 2px rgb(255 255 255 / 80%);
    }

    .small-text {
      margin-top: 2px;
      font-size: 12px;
      color: #918b96;
      text-shadow: 1px 1px 2px rgb(255 255 255 / 80%);
    }

    .title-down {
      margin-top: 2px;
      font-size: 15px;
      font-weight: bold;
      color: #bd434e;
      text-shadow: 1px 1px 2px rgb(255 255 255 / 80%);
    }

    .qr-code {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 170px;
      height: 170px;
      margin-top: 20px;
      overflow: hidden;
      border: 1px solid #f3f3f3;
      border-radius: 5px;

      .qr-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 5px;
      }

      .qr-placeholder {
        font-size: 12px;
        color: #999;
        text-align: center;
      }
    }

    .card-bottom {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      height: 50px;
      margin-top: 10px;
      font-size: 10px;
      text-shadow: 1px 1px 2px rgb(255 255 255 / 80%);
    }
  }

  .data {
    display: flex;
    justify-content: space-between;
    width: 150px;
    margin-top: 10px;
    color: #768073;

    .data-item {
      .text {
        font-size: 10px;
        color: #918b96;
      }
    }
  }

  .explain {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 540px;
    margin-top: 5px;
    font-size: 10px;
    color: red;
  }

  .remark {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 540px;
    margin-top: 5px;
    font-size: 10px;
    color: red;
  }
}
</style>
